<template>
    <div class="box">
        <div class="header">登录页</div>

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                />
            </van-cell-group>
            <div style="margin: 16px">
                <van-button
                    :disabled="btnFlag"
                    round
                    block
                    type="primary"
                    native-type="submit"
                >
                    提交
                </van-button>

                <van-button
                    @click="$router.push('/register/no1')"
                    round
                    block
                    type="success"
                    style="margin-top: 10px"
                >
                    跳转注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import type { Ref } from "vue";
import { login } from '@/api/register'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router'

// 创建一个 选项式 API 中的 this.$router
const router = useRouter()

// 存储用户名
const username: Ref<string> = ref("");
// 存储密码
const password: Ref<string> = ref("");

// 登录事件
async function onSubmit() {
    // console.log("登录", username.value, password.value);
    const { data } = await login({
        loginname: username.value,
        password: password.value
    })

    if (data.code !== "200") {
        // 提示登录失败
        return showFailToast(data.message);
    }

    // 提醒用户 登录 通过
    showSuccessToast(data.message);

    // 跳转到登录页面
    router.push("/");
}

// 根据输入框的内容, 控制按钮能否点击
const btnFlag = computed(() => {
    if (username.value !== "" && password.value !== "") {
        return false;
    } else {
        return true;
    }

    // 任务: 优化上述代码
});
</script>
